<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<!--edge浏览器H5兼容设置-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--360浏览器H5兼容设置-->
	<meta name="renderer" content="webkit" />
	<title>网络硬盘</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--导入核心文件-->
	<script src="../bootstrap3/js/holder.js"></script>
	<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
	<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
	<script src="../bootstrap3/js/bootstrap.js"></script>
	<!-- 字体图标 -->
	<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
	<link rel="stylesheet" type="text/css" href="../css/layout.css" />
	<link rel="stylesheet" type="text/css" href="../css/top.css" />
	<link rel="stylesheet" type="text/css" href="../css/footer.css" />
	<link href="https://cdn.bootcss.com/zTree.v3/3.5.33/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet">
	<link rel="shortcut icon" href="../favicon.ico"/>
	<script src="https://cdn.bootcss.com/zTree.v3/3.5.33/js/jquery.ztree.core.min.js"></script>
	<script src="../js/adddel.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>
<style>
	.trg {
		width: 0;
		height: 0;
		border-left: 3px solid transparent;
		border-right: 3px solid transparent;
		border-top: 6px solid black;
		position: absolute;
		left: 181px;
		top: 8px;
	}
	.org-select {
		cursor: default;
		z-index: -1;
		width: 200px;
	}
	.panel{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
</style>
<body>
<div class="container" style="width: 100%;height: 100%;">
	<div class="col-md-10" style="width: 100%;height: 100%;">
		<div class="panel panel-default" style="background: blanchedalmond">
			<ul class="nav nav-tabs">
				<li class="active"><a href="index.html">我的文件</a></li>
				<li><a href="myshare.html">我的共享</a></li>
				<li><a href="share.html">别人共享</a></li>
				<li><a href="password.html">修改密码</a></li>
				<li> <a href="login.html" onclick="logout()">注销登录</a></li>
			</ul>
			<div class="panel-body">
				<div style="margin-bottom:10px;">当前位置：
					<input id="showUrl" type="text" disabled style="width: 700px" class="btn btn-default" data-dismiss="modal"/>
					<input type="button" value="上一级" id="up" class="btn btn-default" data-dismiss="modal" onclick="inFloderup() ">
				</div>
				<form id="searchForm">
					<div style="margin-bottom:10px;">模糊搜索：
						<input placeholder="请输入文件名" id="search" type="text" style="width: 500px" class="btn btn-default" data-dismiss="modal"/>
						<input type="button" value="搜索"  onclick="searchF()" class="btn btn-default" data-dismiss="modal">
						<input type="reset" value="重置" class="btn btn-default" data-dismiss="modal">
						检索子文件夹：<input type="checkbox" name="zi" value="00" />
					</div>
				</form>
				<input type="hidden" id="temp" value="">
				<input type="hidden" id="tempDel" value="">
				<input type="hidden" id="tempDownload" value="">
				<input type="hidden" id="tempRename" value="">
				<!--<input type="hidden" id="tempMoveFileValue" value="">-->
				<table class="table table-striped">
					<caption>网络硬盘</caption>
					<thead>
					<tr>
						<th>文件名</th>
						<th>文件大小</th>
						<th>上传时间</th>
						<th>文件类型</th>
						<th>文件路径</th>
						<th>共享状态</th>
						<th colspan="3">操作</th>
					</tr>
					</thead>
					<tbody id="address-list">
					</tbody>
				</table>
				<!-- 删除提示框 -->
				<div class="modal fade" id="delcfmModel">
					<div class="modal-dialog">
						<div class="modal-content message_align">
							<div class="modal-header">
								<h4 class="modal-title">确认信息</h4>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										aria-hidden="true">×</span></button>            </div>
							<div class="modal-body">
								<p id="delcfmMsg">您确认要删除吗？</p>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<a class="btn btn-success" data-dismiss="modal" id="btnOkDelete" onclick="delOK()">确定</a>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
				<!-- 下载提示框 -->
				<div class="modal fade" id="downloadModel">
					<div class="modal-dialog">
						<div class="modal-content message_align">
							<div class="modal-header">
								<h4 class="modal-title">确认信息</h4>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										aria-hidden="true">×</span></button>            </div>
							<div class="modal-body">
								<p id="downloadMsg">您确认要下载吗？</p>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<a class="btn btn-success" data-dismiss="modal" id="btnOkDownload" onclick="fileDownload()">确定</a>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
				<!--移动文件-->
				<div class="modal fade" id="moveModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" >
									移动文件
								</h4>
							</div>
							<div class="modal-body" style="height:auto">
								<div style="position: relative;top: -102px;margin:90px;left: -101px;">
									<input id="orgName" class="org-select" onclick="showTree()" readonly>
									<i class="trg" style="position: absolute;"></i>
									<input id="orgCode" type="hidden" name="orgCode" />
									<div class="ztree"
										 style="display:none; position: absolute;border:1px solid #4aa5ff;width:200px;">
										<ul id="treeDemo"></ul>
									</div>
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button type="button" class="btn btn-primary submit" onclick="submit()">
									提交更改
								</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
				<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">新建文件夹</button>
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="myModalLabel">
									新建文件夹
								</h4>
							</div>
							<div class="modal-body">
								输入文件夹名称：<input type="text" name="fname">
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="savefloder()">
									提交
								</button>
							</div>
						</div>
					</div>
				</div>
				<!--重命名-->
				<div class="modal fade" id="renameModal" tabindex="-1" role="dialog" aria-labelledby="renameModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="renameModalLabel">
									文件重命名
								</h4>
							</div>
							<div class="modal-body">
								输入文件新名称：<input type="text" name="rename" placeholder="不需要填文件后缀">
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="rename()">
									提交
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div>
				<form id="form-change-avatar" class="form-horizontal" role="form">
					<div class="form-group">
						<div class="clearfix"></div>
						<div class="col-md-offset-2 col-md-4">
							<input type="file" name="file">
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<input onclick="upload()" type="button" class="btn btn-primary" value="上传" />
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	/*$(document).ready(function () {
		showAList();
		ws();
	});*/
	//初始化jquery简写
	$(function (){
		showAList();
		ws();
	})

	function ws(){
		//判断浏览器是否支持WebSocket
		const supportsWebSockets = 'WebSocket' in window || 'MozWebSocket' in window;
		if (supportsWebSockets) {
			//建立WebSocket连接（ip地址换成自己主机ip）
			const ws = new WebSocket("ws://127.0.0.1/ws");
			ws.onopen = function(){
				//当WebSocket创建成功时，触发onopen事件
				console.log("websocket连接成功");
				//ws.send("hello"); //将消息发送到服务端
				ws.send(
						/*JSON.stringify({
							symbols: "['00700.hk]",
							command:0,
							version:'1.0.0',
							token:'szfiu',
							heartBeat:'heartBeat'
						})*/

						JSON.stringify({
							MyName:'index'
						})
				);
			}
			ws.onmessage = function(e){
				//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
				console.log(e.data);
				alert(e.data);
				/*if (e.data.indexOf('禁用')){
					location.href = "login.html";
				}*/
			}
			ws.onclose = function(e){
				//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
				console.log("websocket已断开");
			}
			ws.onerror = function(e){
				//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
				console.log("websocket发生错误"+e);
			}
		}else{
			// layer.alert("您的浏览器不支持 WebSocket!");
			alert("您的浏览器不支持WebSocket!");
		}
	}


	function delOK(){
		var fid = $("#tempDel").val();
		$.ajax({
			url: "/fileList/" + fid + "/delete",
			type: "POST",
			dataType: "JSON",
			success: function(json) {
				if (json.state == 200) {
					//showAList();
					inFloder("文件夹",$("#showUrl").val());
				} else {
					alert("删除失败！" + json.message);
				}
			},
			error: function(json) {
				alert("删除请求异常！状态码：" + json.status);
			}
		});
	}
	function logout(){
		$.ajax({
			url: "/login/logout",
			type: "POST",
			data: new FormData($("#form-change-avatar")[0]),
			dataType: "JSON",
			processData: false, // 关闭processData处理数据
			contentType: false, // 关闭contentType发送数据的格式
			success: function(json) {
				if (json.state == 200) {
					location.href = "login.html";
				} else {
					alert("登出失败！" + json.message);
				}
			},
			error: function(json) {
				alert("登出请求异常！状态码：" + json.status);
			}
		});
	}
	function searchF(){
		const url = $("#showUrl").val();
		const parUrl = $("#showUrl").val();
		$("#address-list").empty();
		let zi = $("input[name='zi']:checked").val();
		if (zi == null){
			zi = '01'
		}
		$.ajax({
			url: "/fileList/search?keywords="+$("#search").val()+'&zi='+zi+"&parUrl="+parUrl,
			type: "POST",
			dataType: "JSON",
			processData: false, // 关闭processData处理数据
			contentType: false, // 关闭contentType发送数据的格式
			success: function(json) {
				if (json.state == 200) {
					apply(json,url);
				} else {
					alert("搜索失败！" + json.message);
				}
			},
			error: function(xhr) {
				alert("搜索请求异常！状态码：" + xhr.status);
			}
		});
	}
	function upload(){
		const parUrl = $("#showUrl").val();
		if (parUrl){
			$.ajax({
				url: "/fileList/fileUpload?parUrl="+parUrl,
				type: "POST",
				data: new FormData($("#form-change-avatar")[0]),
				dataType: "JSON",
				processData: false, // 关闭processData处理数据
				contentType: false, // 关闭contentType发送数据的格式
				success: function(json) {
					if (json.state == 200) {
						inFloder("文件夹",parUrl);
						alert("上传成功！")
					} else {
						alert("上传失败！" + json.message);
					}
				},
				error: function(xhr) {
					alert("上传请求异常！状态码：" + xhr.status);
				}
			});
		}else {
			alert("parUrl为空!请联系管理员！")
		}

	}
	function showAList() {
		$("#address-list").empty();
		$.ajax({
			url: "/fileList",
			type: "GET",
			dataType: "JSON",
			success: function (json) {
				if (json.state == 200) {
					const url = '/home';
					apply(json,url);
					getJsonTree();
				} else {
					alert("文件列表显示失败！" + json.message);
				}
			},
			error:function (xhr){
				// alert("文件列表请求异常！"+xhr.state);
				location.href = "login.html";
			}
		});
	}
	function fileDownload() {
		window.location.href = "/fileList/download/"+$("#tempDownload").val();
	}
	function savefloder(){
		const parUrl = $("#showUrl").val();
		const fname = $('input[name="fname"]').val();
		$.ajax({
			url: '/fileList/saveFloder?fileName='+fname+'&parUrl='+parUrl,
			type: "POST",
			dataType: "JSON",
			success: function(json) {
				if (json.state == 200) {
					inFloder("文件夹",parUrl);
				} else {
					alert("保存文件夹失败！" + json.message);
				}
			},
			error: function(json) {
				alert("保存文件夹请求异常！状态码：" + json.status);
				//location.href = "login.html";
			}
		});
	}
	function rename(){
		const fid = $("#tempRename").val();
		const rename = $('input[name="rename"]').val();
		$.ajax({
			url: '/fileList/rename?fileName='+rename+'&fid='+fid,
			type: "POST",
			dataType: "JSON",
			success: function(json) {
				if (json.state == 200) {
					//showAList();
					inFloder("文件夹",$("#showUrl").val());
				} else {
					alert("重命名失败！" + json.message);
				}
			},
			error: function(json) {
				alert("重命名请求异常！状态码：" + json.status);
				//location.href = "login.html";
			}
		});
	}
	function inFloder(fileType,url){
		if ("文件夹" === fileType){
			$("#address-list").empty();
			$.ajax({
				url: "/fileList/urlList?url="+url,
				type: "GET",
				dataType: "JSON",
				success: function (json) {
					if (json.state == 200) {
						apply(json,url);
					} else {
						alert("文件列表显示异常！" + json.message);
					}
				},
				error:function (json){
					alert("文件列表请求异常！状态码："+json.state);
					location.href = "login.html";
				}
			});
		}else {
			/*文件弹框可预览*/
			/*window.location.href = "https://bucket.aoas.top"+url;*/
			window.open(
					`https://bucket.aoas.top`+url,
					"_blank",
					"width=800,height=500,menubar=no,toolbar=no,location=no,status=no,resizable=no"
			)
		}
	}
	function inFloderup(){
		$("#address-list").empty();
		const url = $('#showUrl').val();
		if (url == "/home"){
			alert("当前已经是根目录！");
			showAList();
		}else {
			const ppUrl = url.substring(0, url.lastIndexOf("\/"));
			setTimeout(function(){
				$('#showUrl').val(ppUrl);
			},100)
			$.ajax({
				url: "/fileList/urlList?url="+ppUrl,
				type: "GET",
				dataType: "JSON",
				success: function (json) {
					if (json.state == 200) {
						apply(json,url);
					} else {
						alert("文件列表显示异常！" + json.message);
					}
				},
				error:function (json){
					alert("文件列表请求异常！状态码："+josn.state);
					location.href = "login.html";
				}
			});
		}
	}
	function deleteByFid(fid) {
		$("#tempDel").val(fid);
	}
	function DownloadByFid(fid) {
		$("#tempDownload").val(fid);
	}
	function apply(json,url){
		const list = json.data;
		// if (list.length == 0) alert("当前目录没有文件");
		if (list){
			for (let i = 0; i < list.length; i++) {
				let address =
						`<tr>
					<td onclick="inFloder('${list[i].fileType}','${list[i].url}')"> <img id="i" width="80" height="60" src="img/${list[i].imgUrl}"/> <a href="#">#{filename}</a>  </td>
					<td>#{filesize}</td>
					<td>#{createtime}</td>
					<td>#{filetype}</td>
					<td>#{url}</td>
					<td><a class="btn btn-xs add-del btn-info" onclick="shareButton('${list[i].fid}','${list[i].uid}')"> #{share}</a> </td>
					<td><a onclick="deleteByFid(#{fid})" class="btn btn-xs add-del btn-info" data-toggle="modal" data-target="#delcfmModel"><span class="fa fa-trash-o"></span> 删除文件</a></td>
					<!--<td><button class="btn btn-xs add-del btn-info" data-toggle="modal" data-target="#moveModal" onclick="moveFile('${list[i].fileName}')"><span class="fa fa-home fa-fw"></span> 移动文件</button></td>-->
					<td><button class="btn btn-xs add-del btn-info" data-toggle="modal" data-target="#moveModal" onclick="moveFileValue('${list[i].fileName}','${list[i].fid}')"><span class="fa fa-home fa-fw"></span> 移动文件</button></td>
					<td><button class="btn btn-xs add-del btn-info" data-toggle="modal" data-target="#renameModal" onclick="renameFile('${list[i].fid}')"><span class="fa fa-pencil fa-fw"></span> 重命名</button></td>
					<td class="show"><a onclick="DownloadByFid('${list[i].fid}')" class="btn btn-xs add-del btn-info" data-toggle="modal" data-target="#downloadModel"><span class="fa fa-camera-retro"></span> 下载文件</a></td>
					</tr>
					`
				//替换
				address = address.replace("#{fid}", list[i].fid);
				address = address.replace("#{uid}", list[i].uid);
				address = address.replace("#{filename}", list[i].fileName);
				address = address.replace("#{filesize}", list[i].fileSize);
				address = address.replace("#{createtime}", list[i].createTime);
				address = address.replace("#{share}", list[i].share);
				address = address.replace("#{url}", list[i].url);
				address = address.replace("#{filetype}", list[i].fileType);
				address = address.replace("#{parid}", list[i].parId);
				address = address.replace("#{imgurl}", list[i].imgUrl);
				//放入
				$("#address-list").append(address);
				if ('文件夹' === list[i].fileType) document.getElementsByClassName("show")[i].style.visibility="hidden";
			}
			$("#showUrl").val(list[0].parUrl)
		}else {
			$("#showUrl").val(url)
		}
	}
	function shareButton(fid,uid){
		$.ajax({
			url: "/fileList/shareState?fid="+fid+"&uid="+uid,
			type: "GET",
			dataType: "JSON",
			async:true,
			success: function(json) {
				if (json.state == 200) {
					//showAList();  //刷新到首页体验不好，应该根据showUrl刷新到当前页
					inFloder("文件夹",$("#showUrl").val());
				} else {
					alert("修改状态异常：" + json.message);
				}
			},
			error: function(json) {
				alert("修改状态请求异常！状态码："+josn.state);
			}
		});
	}
	let paramArray;

	let treeNodename;

	let treeNodeId;

	function submit(){
		const fileName = paramArray[0];
		//var fileName = map.get("filename");
		if (treeNodename == null || treeNodename == ''){
			alert("确定要移动《"+fileName+"》到《/home》根目录吗？")
			paramArray.push('home');
			paramArray.push('00');
		}else {
			alert("确定要移动《"+fileName+"》到《"+treeNodename+"》吗？");
			if (fileName == treeNodename){
				alert("不能移动到自己目录下"); //只针对文件夹限制移动到自己下面
				return false;
			}else {
				paramArray.push(treeNodename);
				paramArray.push(treeNodeId);
			}
		}
		// map.set("treeNodename",treeNodename);
		// map.set("treeNodeId",treeNodeId);
		//moveRun(map);
		moveRun(paramArray);
		$(".submit").attr("data-dismiss","modal");
	}
	//树状图展示
	const setting = {
		data: {
			simpleData: {
				enable: true
			}
		},
		//回调
		callback: {
			onClick: zTreeOnClick
		},
		view: {
			fontCss: {fontSize: "14px"}
		}
	};
	/*function moveFile(filename){
		$("#temp").val(filename);
	}*/
	paramArray = [];

	//var map = new Map();
	function moveFileValue(filename,fid){
		//需要 filename,fid
		//$("#tempMoveFileValue").val(filename);
		paramArray = [];//放入之前先清空
		paramArray.push(filename,fid);
		// map.set("filename",filename);
		// map.set("fid",fid);
	}
	function renameFile(filename){
		$("#tempRename").val(filename);
	}

	treeNodename = '';
	treeNodeId = '';

	//节点点击事件
	function zTreeOnClick(event, treeId, treeNode) {
		treeNodename = treeNode.name;
		treeNodeId = treeNode.id;
		//console.log('当前文件位置：',treeNode.getPath().map(function (node) { return node.name; }).join('-'))
		$('#orgName').val(treeNodename);
		$('#orgCode').val(treeNodeId);
		hideTree();
		// moveRun(treeNode.name,$("#temp").val());点击节点即触发请求
	}
	function moveRun(paramArray){
		$.ajax({
			url: "/fileList/moveFileRun",
			type: "POST",
			contentType:'application/json;charset=utf-8',
			dataType: "JSON",
			async:true,
			data:JSON.stringify(paramArray),
			success: function(json) {
				if (json.state == 200) {
					alert("文件移动成功！")
					//showAList();
					inFloder("文件夹",$("#showUrl").val());
				} else {
					alert("文件移动失败：" + json.message);
				}
			},
			error: function(json) {
				alert("移动文件请求异常！状态码：" + json.status);
			}
		});
	}
	//下拉框显示 隐藏
	function showTree() {
		if ($('.ztree').css('display') == 'none') {
			$('.ztree').css('display', 'block');
		} else {
			$('.ztree').css('display', 'none');
		}
		$("body").bind("mousedown", onBodyDownByActionType);
	};

	/*$(document).ready(function () {
		//初始组织树状图
		$.ajax({
			url: "/fileList/jsonTree",
			type: "GET",
			dataType: "JSON",
			async:true,
			success: function(json) {
				if (json.state == 200) {
					$.fn.zTree.init($("#treeDemo"), setting, json.data);
					//console.log(json.data);
				} else {
					//location.href = "login.html";
					alert("获取树状图失败！"+json.message);
				}
			}/!*,
			error: function(json) {
				alert("获取树状图请求异常！"+json.state);
			}*!/
		});
	});*/

	//改为，文件列表获取成功后，获取树状图

	function getJsonTree() {
		//初始组织树状图
		$.ajax({
			url: "/fileList/jsonTree",
			type: "GET",
			dataType: "JSON",
			async:true,
			success: function(json) {
				if (json.state == 200) {
					$.fn.zTree.init($("#treeDemo"), setting, json.data);
					//console.log(json.data);
				} else {
					//location.href = "login.html";
					alert("获取树状图失败！"+json.message);
				}
			},
			error: function(json) {
				alert("获取树状图请求异常！"+json.state);
			}
		});
	}


	function hideTree() {
		$('.ztree').css('display', 'none');
		$("body").unbind("mousedown", onBodyDownByActionType);
		return false;
	}
	//区域外点击事件
	function onBodyDownByActionType(event) {
		if (event.target.id.indexOf('treeDemo') == -1) {
			if (event.target.id != 'selectDevType') {
				hideTree();
			}
		}
	}
</script>
</body>
</html>